<template>
  <div class="aboutFee">
    <div class="tableDiv">
      <div class="tableTitle">
        <div>{{$t('exchange.exchangeUsdt')}}</div>
        <div>{{$t('exchange.minerFee')}}</div>
        <div>{{$t('exchange.feeBi')}}</div>
      </div>
      <div class="tableContent">
        <div class="tableItem">
          <div>
            <div>
              <p class="center">USDT</p>
              <p class="chian" style="font-size: 12px;">(EOS{{ $t('bosChain.chain') }})</p>
            </div>
            <i class="iconfont icon-huaban124 iconChain"></i>
            <div>
              <p class="center">USDT</p>
              <p class="chian" style="font-size: 12px;">(TRON{{ $t('bosChain.chain') }})</p>
            </div>
          </div>
          <div>{{$t('exchange.no')}}</div>
          <div>{{$t('exchange.no')}}</div>
        </div>
        <div class="tableItem">
          <div>
            <div>
              <p class="center">USDT</p>
              <p class="chian" style="font-size: 12px;">(EOS{{ $t('bosChain.chain') }})</p>
            </div>
            <i class="iconfont icon-huaban124 iconChain"></i>
            <div>
              <p class="center">USDT</p>
              <p class="chian" style="font-size: 12px;">(ETH{{ $t('bosChain.chain') }})</p>
            </div>
          </div>
          <div>{{$t('exchange.ownPay')}}</div>
          <div>0.5 USDT</div>
        </div>
        <div class="tableItem">
          <div>
            <div>
              <p class="center">USDT</p>
              <p class="chian" style="font-size: 12px;">(EOS{{ $t('bosChain.chain') }})</p>
            </div>
            <i class="iconfont icon-huaban124-copy iconChain"></i>
            <div>
              <p class="center">USDT</p>
              <p class="chian" style="font-size: 12px;">(TRON{{ $t('bosChain.chain') }})</p>
            </div>
          </div>
          <div>{{$t('exchange.no')}}</div>
          <div>{{$t('exchange.no')}}</div>
        </div>
        <div class="tableItem">
          <div>
            <div>
              <p class="center">USDT</p>
              <p class="chian" style="font-size: 12px;">(EOS{{ $t('bosChain.chain') }})</p>
            </div>
            <i class="iconfont icon-huaban124-copy iconChain"></i>
            <div>
              <p class="center">USDT</p>
              <p class="chian" style="font-size: 12px;">(ETH{{ $t('bosChain.chain') }})</p>
            </div>
          </div>
          <div>{{$t('exchange.ownPay')}}</div>
          <div>0.5 USDT</div>
        </div>
      </div>
    </div>
    <div class="tipDiv">
      <div class="tip">· {{$t('exchange.minerFeeTip1')}}</div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'PopupMinerFee', // 旷工费自付
  props: {
    coin: String,
    popupMinerFeeVisible: Boolean,
    way: Number, // 1:eos到其他链 2:其他链到eos
  },
  data() {
    return {}
  },
  methods: {
    // 关闭弹窗
    handleOrder() {
      this.$emit('listenOrder', true)
    },
    handleClose() {
      this.$emit('listenClose', false)
    },
  }
}
</script>

<style lang="scss" scoped>

.aboutFee{
  box-sizing: border-box;
  position: relative;
  background: #fff;
  border-radius: 15px;

  .title{
    text-align: center;
    margin-bottom: 40px;
    color: #4A90E2;
  }
  .tableDiv{
    border: 1px solid #4A90E2;
    border-radius: 15px;
    .tableTitle{
      display: flex;
      background: #E9F2FF;
      border-radius: 15px 15px 0 0;
      color: #4A90E2;
      border-bottom: 1px solid #A8D0FF;
      &>div{
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 50px;
        border-right: 1px solid #A8D0FF;
        box-sizing: border-box;
        &:last-child{
          border-right: none;
        }
        // 特殊样式
        &:first-child{
          min-width: 250px;
          // background-color: #eee;
          border-radius: 15px 0 0 0;
        }
      }
    }
    .tableContent{
      display: flex;
      flex-direction: column;
      background: #fff;
      border-radius: 0 0 15px 15px;
      color: #4A4A4A;
      &>.tableItem{
        display: flex;
        border-bottom: 1px solid #A8D0FF;
        &:last-child{
          border-bottom: none;
        }
        &>div{
          display: flex;
          align-items: center;
          justify-content: center;
          flex: 1;
          border-right: 1px solid #A8D0FF;
          padding: 22px 22px 18px;
          box-sizing: border-box;
          &:last-child{
            border-right: none;
          }
          // 特殊样式
          &:first-child{
            min-width: 250px;
          }
        }
      }
    }
  }

  .chian{
    text-align: center;
    color: #9B9B9B;
  }
  .iconChain{
    color: #4A90E2;
    margin: 0 10px;
  }
  .ethFee{
    flex-direction: column;
  }
  .tipDiv{
    margin-top: 18px;
  }
  .tip{
    // margin: .17px .36px;
    color: #9B9B9B;
    padding-left: 5px;
    position: relative;
    margin-bottom: 10px;

  // &::before{
  //     content: '';
  //     position: absolute;
  //     width: 6px;
  //     height: 6px;
  //     border-radius: 50%;
  //     background: #A6B6D7;
  //     left: 15px;
  //     top: 18px;
  //     transform: translate(-50%, -50%);
  //   }
  }
}
</style>
